<template>
  <div class="guide-category-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">康复指南分类</h2>
      <p class="page-subtitle">选择您需要审核的康复指南分类</p>
    </div>

    <!-- 分类卡片网格 -->
    <div class="category-grid">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <t-loading size="large" text="加载中..." />
      </div>

      <!-- 分类卡片列表 -->
      <t-row v-else :gutter="[24, 24]">
        <t-col v-for="category in categories" :key="category.id" :xs="12" :sm="8" :md="6" :lg="4">
          <t-card class="category-card" :bordered="false" hover-shadow @click="handleCategoryClick(category)">
            <!-- 分类图标 -->
            <div class="category-icon">
              <img src="@/assets/rehabilitation-exercise.png" alt="康复训练图片" />
            </div>

            <!-- 分类名称 -->
            <div class="category-name">
              {{ category.name }}
            </div>
          </t-card>
        </t-col>
      </t-row>

      <!-- 空状态 -->
      <div v-if="!loading && categories.length === 0" class="empty-container">
        <t-empty description="暂无分类数据" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getGuideCategoryList } from '@/api/guideCategory';
import type { GuideCategoryResponse } from '@/api/model/guideCategoryModel';
import { MessagePlugin } from 'tdesign-vue-next';
import { onActivated, ref } from 'vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 分类数据
const categories = ref<GuideCategoryResponse[]>([]);
// 加载状态
const loading = ref(false);

// 获取指南分类列表
const fetchCategories = async () => {
  try {
    loading.value = true;
    const response = await getGuideCategoryList({ pageNum: 1, pageSize: 100 });
    categories.value = response.data.data.records;
  } catch (error: any) {
    MessagePlugin.error(error.message || '获取分类列表失败，请重试');
  } finally {
    loading.value = false;
  }
};

// 处理分类卡片点击事件
const handleCategoryClick = (category: GuideCategoryResponse) => {
  try {
    // 跳转到指南列表页面，并传递分类ID
    router.push({
      path: '/guide/simpleList',
      query: {
        categoryId: category.id.toString(),
        categoryName: category.name,
      },
    });
  } catch (error: any) {
    MessagePlugin.error(error.message || '页面跳转失败，请重试');
  }
};

// 组件挂载时获取分类数据
onActivated(() => {
  fetchCategories();
});
</script>

<style scoped>
.guide-category-container {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #1d2129;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 16px;
  color: #86909c;
  margin: 0;
}

/* 分类网格样式 */
.category-grid {
  max-width: 1200px;
  margin: 0 auto;
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* 空状态样式 */
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

/* 分类卡片样式 */
.category-card {
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  background: white;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 82, 217, 0.12);
}

.category-icon img {
  width: 32px; /* 设置图片宽度为32px，减小尺寸 */
  height: 32px; /* 设置图片高度为32px，减小尺寸 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
  border-radius: 6px; /* 添加圆角 */
  margin-bottom: 4px;
  margin-left: 10px;
}

/* 分类名称样式 */
.category-name {
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .guide-category-container {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .category-card {
    height: 140px;
  }

  .category-name {
    font-size: 14px;
  }
}
</style>
